<template>
  <div class='footer pa'>
    <van-tabbar v-model="$store.state.footerActive">
       <van-tabbar-item v-for="(item,index) in listData" :key="index" :to="item.url" :dot="item.isDot" :info="item.info" >
         <span>{{item.label}}</span>
         <img
          slot="icon"
          slot-scope="props"
          :src="props.active ? item.active : item.normal"
        >
       </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  components: {},
  name: "",
  data() {
    return {
      listData:[
        { isDot:false,info:'',label:"首页",url:'/home',active:require('../assets/images/footer/icon-01-s.png'),normal:require('../assets/images/footer/icon-01.png')},
        { isDot:false,info:'5',label:"信息",url:'/message',active:require('../assets/images/footer/icon-02-s.png'),normal:require('../assets/images/footer/icon-02.png')},
        { isDot:false,info:'',label:"我的",url:'/center',active:require('../assets/images/footer/icon-03-s.png'),normal:require('../assets/images/footer/icon-03.png')}
      ],
    };
  },
  watch: {
    $route(to, from) {
      this.setActive()
    }
  },
  methods:{
    setActive(){
      var path=_g.getRouterPath(this)
      this.listData.map((val,index)=>{
        if(path.indexOf(val.url)>-1){
          this.$set(this.$store.state,'footerActive',index)
          return
        }
      })
    }
  },
  created() {
    this.setActive()
  }
};
</script>
<style lang="scss" scoped>
.footer {
  bottom: 0;
  height: 100px;
  width: 100%;
}
</style>